import ScrollableTabView from "../pages/college/CommonProblem";
import {ScrollableTabBar} from "react-native-scrollable-tab-view";
import {ScrollView, StyleSheet, Text, View} from "react-native";
import React, { Component } from "react";
export default class TabBars extends React.Component{
    constructor(props){
        super(props);
        this.state={
            index:0
        }
    }

    tabClick(index){
        this.setState({
            index:index
        })
    }

    render(){
        const actoveColor =  '#EFB81B',nonActive = "#999";
        const {index} = this.state;
        return <View style={styles.container}>
            <View style={styles.tabWarp}>
                <View style={index === 0 ? styles.tabActive:styles.tab}>
                    <Text onPress={this.tabClick.bind(this,0)} style={index ===0?styles.tabTextActive:styles.tabText} >推介</Text>
                </View>
                <View style={index === 1 ? styles.tabActive:styles.tab}>
                    <Text onPress={this.tabClick.bind(this,1)} style={index ===1?styles.tabTextActive:styles.tabText}>视频</Text>
                </View>
                <View style={index === 2 ? styles.tabActive:styles.tab}>
                    <Text onPress={this.tabClick.bind(this,2)} style={index ===2?styles.tabTextActive:styles.tabText}>文章</Text>
                </View>
            </View>
        </View>
    }

}

const styles = StyleSheet.create({
    container: {
        marginTop:100
    },
    tabWarp:{
        flexDirection:"row"
    },
    tab:{
        flex:1,
        borderBottomWidth:2,
        borderBottomColor:"#f5f5f5"
    },
    tabActive:{
        flex:1,
        borderBottomWidth:2,
        borderBottomColor:"#EFB81B"
    },
    tabText:{
        textAlign:"center",
        color: "#999",
        lineHeight:32

    },
    tabTextActive:{
        textAlign:"center",
        color:'#EFB81B',
        lineHeight:32
    }

});